<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件共享</title>
    <script src="js/vue.global.prod.min.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        html {
            width: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            min-width: 100%;
        }

        #app {
            top: 0;
            bottom: 0;
            width: 100%;
            position: absolute;
            background: linear-gradient(0deg, #f7f0ac, #acf7f0, #f0acf7);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .fileItem {
            width: 80%;
            height: 30px;
            min-height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin: 5px;
            /*border: 1px solid gray;*/
        }

        .messageItem {
            width: 80%;
            /*height: 30px;*/
            /*min-height: 30px;*/
            line-height: 30px;
            /*overflow: hidden;*/
            margin: 5px;
            border: 1px solid gray;
            user-select: all;
        }

        .contentContainer {
            background: white;
            width: 80%;
            min-height: 80%;
            max-height: 80%;
            position: relative;
        }

        .fileContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 80%;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .messageContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 80%;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .logo {
            padding: 10px 0 10px;
            font-size: 50px;
        }

        @media screen and (max-width: 800px) {
            .logo {
                font-size: 30px;
            }
        }

        .switchPanel {
            margin: 15px 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .optionPanel {
            margin: 10px 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100%;
            position: absolute;
            bottom: 10px;
        }

        button {
            color: black;
            background: white;
            margin: 0 10px;
            height: 30px;
            width: 80px;
            border: 1px solid gray;
            cursor: pointer;
            border-radius: 5px;
        }

        button:hover {
            background: #deecf9;
        }

        .uploadProcess {
            background-color: #74b9ff;
            height: 2px;
            position: absolute;
            bottom: 0;
            transition: all 0.5s ease;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="logo">
        <div>
            startWeb
        </div>
    </div>
    <div class="contentContainer">
        <div class="switchPanel">
            <button @click="fileListSelected">文件列表</button>
            <button @click="messageListSelected">消息列表</button>
        </div>
        <div v-show="currentPage==='file'" class="fileContainer">
            <div v-for="i in fileList" class="fileItem">
                <a :href=`/file/${i}` target="_blank" :title="i">{{i}}</a>
            </div>
        </div>
        <div v-show="currentPage==='message'" class="messageContainer">
            <div v-for="i in messageList" class="messageItem">
                {{i}}
            </div>
        </div>
        <div class="optionPanel">
            <button @click="option" v-bind:disabled="uploading">{{ buttonText() }}</button>
        </div>
        <div class="uploadProcess"></div>
    </div>
    <!--hidden input-->
    <input type="file" multiple style="display: none" id="fileInput" @change="fileSelected">
</div>
</body>
</html>
<script>
    const app = Vue.createApp({
        data() {
            return {
                currentPage: "file"
                , fileList: []
                , messageList: []
                , uploading: false
            }
        }
        , created() {
            this.loadData()
            let that = this
            setInterval(function () {
                that.loadData()
            }, 2000)
        }
        , methods: {
            buttonText() {
                if (this.uploading) {
                    return '正在上传'
                } else {
                    return this.currentPage === 'file' ? "上传文件" : "发送消息"
                }
            }
            , loadData() {
                if (this.currentPage === "file") {
                    this.loadFileList()
                } else {
                    this.loadMessageList()
                }
            }
            , fileListSelected() {
                this.currentPage = "file"
                this.loadData()
            }
            , messageListSelected() {
                this.currentPage = "message"
                this.loadData()
            }
            , loadFileList() {
                axios.get("/fileList").then((res) => {
                    let data = res.data
                    this.fileList = data;
                }).catch((e) => {
                    console.log(e.message)
                })
            }
            , loadMessageList() {
                axios.get("/messageList").then((res) => {
                    let data = res.data
                    this.messageList = data;
                }).catch((e) => {
                    console.log(e.message)
                })
            }
            , option() {
                // 点击操作
                if (this.currentPage === "file") {
                    // 触发点击文件选择框的事件
                    document.querySelector("#fileInput").click()
                } else {
                    let msg = prompt("输入要发送的消息")
                    if (msg && msg.trim()) {
                        axios.get(`/addMessage?message=${encodeURI(msg)}`).then((res) => {
                            this.loadData()
                        }).catch((e) => {
                            console.error(e.message)
                        })
                    }
                }
            }
            , fileSelected() {
                let files = document.querySelector("#fileInput").files;
                let formData = new FormData()
                for (const file of files) {
                    formData.append("files", file)
                }
                this.uploading = true;
                axios.post("/uploadFile", formData, {
                    onUploadProgress: function (e) {
                        let percent = Math.floor(e.loaded / e.total * 100)
                        document.querySelector(".uploadProcess").style.width = percent + '%'
                        if (percent === 100) {
                            setTimeout(function () {
                                document.querySelector(".uploadProcess").style.width = '0'
                            }, 1000)
                        }
                    }
                }).then((res) => {
                    this.loadData()
                    this.uploading = false;
                }).catch((err) => {
                    this.uploading = false;
                    console.error(err.message)
                })
            }
        }
    })
    app.mount('#app')
   </script>